import {Component,createRef} from 'react'
import { Button,Input } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import './AcMaTop.css'
import axios from 'axios'
import qs from 'qs'
import {inject,observer} from "mobx-react";
import {Link} from "react-router-dom";
@inject('jurisdiction')
@observer
class AcMaTop extends Component{
    constructor() {
        super();
        this.adminName = createRef();      //用户名
        this.state = {
            isOperation:'',         //是否可更改状态
            selectedRowKeys:[],      //选择行序号数组
            tableData:[],        //表格数据
        }
    }
    //删除
    delete=()=>{
        axios.post('/api/admin/admin/deleteDO',qs.stringify({
            ids:this.state.selectedRowKeys.join()
        }),{
            headers:{
                'Content-Type':'application/x-www-form-urlencoded'
            }
        }).then((res)=>{
            if(res.data.code === 200) {
                this.props.refreshTable({code: 200, msg: '删除成功'})
            }else {
                this.props.refreshTable({code: 500, msg: '删除失败'})
            }
        })
    };
    //禁用
    disableSelect=(data)=>{
        var idArr = [];
        if(data && data.length>0){      //单个禁用
            idArr = [...data]
        }else {
            idArr = this.state.selectedRowKeys
        }
        axios.post('/api/admin/admin/statusDO',qs.stringify({
            ids:idArr.join(),
            shopId:'-1'       //-1:禁用，0：启用
        }),{
            headers:{
                'Content-Type':'application/x-www-form-urlencoded'
            }
        }).then((res)=>{
            if(res.data.code === 200){
                this.props.refreshTable({code:200,msg:'状态改变成功'})
            }else {
                this.props.refreshTable({code:500,msg:'状态改变失败'})
            }
        })

    };
    //启用
    ableSelect=(data)=>{
        var idArr = [];
        if(data && data.length>0){      //单个禁用
            idArr = [...data]
        }else {
            idArr = this.state.selectedRowKeys
        }
        axios.post('/api/admin/admin/statusDO',qs.stringify({
            ids:idArr.join(),
            shopId:'0'
        }),{
            headers:{
                'Content-Type':'application/x-www-form-urlencoded'
            }
        }).then((res)=>{
            if(res.data.code === 200){
                this.props.refreshTable({code:200,msg:'状态改变成功'})
            }else {
                this.props.refreshTable({code:500,msg:'状态改变失败'})
            }
        })
    };
    //搜索
    searchEvent=()=>{
        axios.post('/api/admin/admin/search',qs.stringify({
            adminName:this.adminName.current.state.value==undefined?'':this.adminName.current.state.value,
            createName:''
        }),{
            headers:{
                'Content-Type':'application/x-www-form-urlencoded'
            }
        }).then((res)=>{
           if(res.data.code == 0){     //查询成功
               var list =[...res.data.data.list];
               list.forEach(item=>{
                   item.key = item.adminId
               });
               this.props.refreshTable({code:200,data:list})
           }
        })
    };
    //监听props的变化
    componentWillReceiveProps(props) {
        this.setState({
            isOperation:props.isOperation,
            selectedRowKeys:props.selectedRowKeys,
            tableData:props.tableData
        })
    }
    render() {
        return (
            <>
                <div className='acMaTop'>
                    <div className='acMaLeft'>
                        {/*添加按钮*/}
                        <div><Button type="primary"><Link to='/addAccount'>添加</Link></Button></div>
                        <div onClick={this.ableSelect} className={this.state.isOperation==false?'bt_disable':'bt_able'}>
                            <Button disabled={this.state.isOperation==false?true:false}  type="primary">启用</Button>
                        </div>
                        <div onClick={this.disableSelect} className={this.state.isOperation==false?'bt_disable':'bt_able'}>
                            <Button disabled={this.state.isOperation==false?true:false} type="primary">禁用</Button>
                        </div>
                        <div onClick={this.delete} className={this.state.isOperation==false?'bt_disable':'bt_able'}>
                            <Button disabled={this.state.isOperation==false?true:false}  type="primary">删除</Button>
                        </div>
                    </div>
                    {/*搜索*/}
                    <div className='acMaRight'>
                        {/*搜索按钮*/}
                        <div onClick={this.searchEvent} className='bt_search'><Button type="primary" icon={<SearchOutlined />}>搜索</Button></div>
                        <div className='searchInput'>
                            用户名：<Input ref={this.adminName}  placeholder="请输入内容" />
                        </div>
                    </div>
                </div>

            </>
        );
    }
}

export default AcMaTop
